<template>
	<el-dialog
	  title="请选择举报类型(必选)"
	  :visible.sync="dialogVisible"
	  width="30%"
	  >
	  <div style="display: flex;flex-direction: column;">
			<div v-for="(item,index) in juBaoList" @click="juLei(item.type)" style="cursor: pointer;display: flex;align-items: center;margin: 10px 0;">
				<i class="el-icon-success" v-if="item.show" style="font-size: 24px;color: #64B6A8;"></i>
				<div v-else style="width: 22px;height: 22px;border-radius: 22px;border: #C9C9C9 1px solid;"></div>
				<div style="color: #000000;font-size: 16px;margin-left: 12px;">{{item.type}}</div>
			</div>
		</div>
		<div style="color: #333333;font-size: 18px;margin-top: 19px;">填写举报说明(必填)</div>
		<el-input
		  type="textarea"
		  placeholder="请详细填写举报理由"
		  v-model="desc"
		  maxlength="300"
		  show-word-limit
			style="margin: 12px 0;"
		>
		</el-input>
		<el-upload
			:action="$upLoad"
			list-type="picture-card"
			:on-preview="handlePictureCardPreview"
			:on-remove="handleRemove"
			:on-success="handleSuccess"
		>
			<i class="el-icon-plus"></i>
		</el-upload>
		<div style="display: flex;margin-top: 42px;align-items: baseline;">
			<i class="el-icon-success" v-if="xystate" style="font-size: 15px;color: #64B6A8;" @click="xuanzhong"></i>
			<div v-else style="width: 13px;height: 13px;border-radius: 13px;border: #C9C9C9 1px solid;" @click="xuanzhong"></div>
			<div style="margin-left: 6px;color: #64B6A8;">
				<span style="color: #666666;">举报即默认同意</span>
				<!-- <span style="cursor: pointer;" @click="toXieyi(4)">《个人信息保护声名》</span>
				<span style="cursor: pointer;" @click="toXieyi(5)">《平度之窗服务协议》</span>
				<span style="cursor: pointer;" @click="toXieyi(2)">《隐私权政策》</span> -->
				<span style="color: #64b6a8;cursor: pointer;" @click="toXieyi(3)">《帮帮同城用户协议》</span>
				<span style="color: #64b6a8;cursor: pointer;" @click="toXieyi(2)">《帮帮同城隐私政策》</span>
			</div>
		</div>
		<div style="color: #FFFFFF;font-size: 18px;width: 100%;height: 44px;background-color:#64B6A8;text-align: center;line-height: 44px;border-radius: 40px;margin: 12px 0;cursor:pointer;" @click="subJu">立即举报</div>
	</el-dialog>
</template>

<script>
	export default{
		name:"report",
		props:['bUserId'],
		data(){
			return{
				xystate:true,
				dialogVisible: false,
				desc:'',
				agreement:true,
				juBaoList:[
					{
						type:'房源不存在',
						show:false,
					},
					{
						type:'房源信息不真实',
						show:false,
					},
					{
						type:'房源图片不真实',
						show:false,
					},
					{
						type:'其他',
						show:false,
					}
				],
				dialogImageUrl:[],
				dialogVisible:false,
				imgList:[],
				data:{
					userId:'',
					bUserId:'',
					reportType:'', 
					houseId:''
				}
			};
		},
		methods:{
			jubaoGuan(houseId){
				let user = JSON.parse(localStorage.getItem("userInfo"))
				if(user != null){
					this.dialogVisible = !this.dialogVisible
					this.data.bUserId = this.bUserId
					this.data.userId = user.id 
					this.data.houseId = houseId
					this.data.businessType = 1
				}else{
					this.$message({
					  message: "请登录之后在来举报！",
					  type: "error",
					  offset: 120,
					  duration: 2000,
					});
				}
			},
			toXieyi(id){
				window.open('https://www.bangbangtongcheng.com/conven_pc/#/index/particulars?type=prot&id='+id,'_blank')
			},
			juLei(type){
				this.juBaoList.forEach((e) =>{
					e.show = false
					if(e.type == type){
						e.show = true
					}
				})
			},
			xuanzhong(){
				if (this.xystate){
					this.xystate = false
				} else {
					this.xystate = true
				}
			},
			subJu(){
				if (!this.xystate){
					this.$message({
					  message: "请阅读并同意相关协议",
					  type: "error",
					  offset: 120,
					  duration: 2000,
					});
					return;
				}
				let reportType = ''
				this.juBaoList.forEach((e) => {
					if(e.show){
						reportType=e.type
					}
				})
				if(reportType.length == 0){
					this.$message({
					  message: "请选择举报类型！",
					  type: "error",
					  offset: 120,
					  duration: 2000,
					});
					return;
				}
				this.data.reportType = reportType
				if(this.desc.trim().length == 0){
					this.$message({
					  message: "请填写举报理由！",
					  type: "error",
					  offset: 120,
					  duration: 2000,
					});
					return;
				}
				this.data.reportContent = this.desc
				if(this.imgList.length > 0){
					let image = "";
					this.imgList.forEach((e,index) =>{
						if (index == this.imgList.length - 1){
							image+=e.path
						} else {
							image+=e.path+"|"
						}
					})
					console.log(image);
					this.data.image = image
				}
				// console.log(this.data);
				// return 
				this.$postHttp("/mob/user/saveReport",this.data).then((data) => {
					if(data.code == 200){
						this.$message({
						  message: "举报成功！",
						  type: "success",
						  offset: 120,
						  duration: 2000,
						});
						this.dialogVisible = false
					}
				})
			},
			handleRemove(file, fileList) {
				for (var i = 0; i < this.imgList.length; i++) {
					if(this.imgList[i].id == file.uid){
						this.imgList.splice(i,1)
					}
				}
			},
			handlePictureCardPreview(file) {
			  this.dialogImageUrl = file.url;
			  this.dialogVisible = true;
			},
			handleSuccess(response, file, fileList){
				this.imgList.push({
					id:file.uid,
					path:response.data[0].url
				})
			},
		}
	}
</script>

<style lang="less" scoped>
/deep/.el-dialog__body{
	padding: 0 20px 20px 20px !important;
}
</style>
